//写结构
<template>
	<view class="header" :style="{ 
			paddingTop:windowInfo.statusBarHeight + 'px',
			paddingRight:menuRect.width + 10 + 'px', 
			height: menuRect.height + 10 +'px'
	}">
		<!--左侧logo-->
		<image class="header-logo" src="https://p2.ssl.qhimg.com/t01893213e448dbbfa2.png" mode="heightFix"></image>
		<!--右侧菜单-->
		<image @click="isShowMenu = !isShowMenu" class="header-menu"
			src="https://p1.ssl.qhmsg.com/t010fa93a99715aad32.png" mode=""></image>
		<!--菜单列表-->
		<view class="header-menu-list" :class="isShowMenu ? 'is-show-menu' : '' ">
			菜单列表
		</view>
	</view>
	<scroll-view scroll-y scroll-with-animation :scroll-top="scrollTop" @scroll="onScroll" class="scroll-body" :style="{
		height: `calc(100vh - ${menuRect.height + 10 + 'px'} - ${windowInfo.statusBarHeight + 'px'})`
	}">
		<!--轮播图-->
		<swiper class="swiper-banner" autoplay circular indicator-dots :interval="2000"
			indicator-color="rgba(255,255,255,0.3)" indicator-active-color="#fff">
			<swiper-item>
				<image class="swiper-image" src="https://p2.ssl.qhimg.com/t011e7a7b3f6cc9bfdd.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="https://p2.ssl.qhimg.com/t011e7a7b3f6cc9bfdd.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="https://p2.ssl.qhimg.com/t011e7a7b3f6cc9bfdd.jpg"></image>
			</swiper-item>
		</swiper>
		<!--产品入口-->
		<view class="entry">
			<view v-for="item in entryList" :key="item.text" class="entry-item">
				<image class="entry-image" :src="item.icon" mode="heightFix"></image>
				<text class="entry-text">{{item.text}}</text>
			</view>
		</view>
		<!--分割模块-->
		<view class="divider"></view>
		<!--手机软件-->
		<view class="software">
			<text class="software-title">手机软件</text>
			<view class="software-list row wrap">
				<view v-for="item in sotwareList" :key="item.name" class="software-item column">
					<image @click="goToPage('/pages/software/software')" class="software-image" :src="item.icon"
						mode="">
					</image>
					<text class="software-name">{{item.name}}</text>
					<text class="software-size">{{item.size}}M</text>
					<!-- 添加条件编译：H5端才支持下载链接-->
					<!-- #ifdef H5 -->
					<a :href="item.download" class="software-download">下载</a>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<!-- 添加条件编译：小程序页面跳转，只能跳转本地页面。目标页面必须在 pages.json 中注册。 -->
					<!--<!--#ifdef MP-->-->
					<!-- <navigator url="/pages/software/software" class="software-download">查看</navigator> -->
					<!--<!--#endif-->-->
					<!-- 通过 target="miniProgram" 和 short-link  可以打开其他小程序 -->
					<navigator target="miniProgram" short-link="#小程序://滴滴出行丨打车骑行火车租车代驾/4kuRTwro0NzKX4n"
						class="software-download">打开</navigator>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<!--分隔块-->
		<view class="divider"></view>
		<!--智能硬件-->
		<view class="hardware">
			<text class="floor-title">智能硬件</text>
			<view class="hardware-list">
				<view v-for="item in hardwareList" :key="item.name" :class="item.type">
					<!-- 这是标题 -->
					<text class="hardware-name">{{ item.name }}</text>
					<!-- 不是形态2时，介绍文字放前面 -->
					<text v-if="item.type !== 'hardware-item02'" class="hardware-desc">{{ item.desc }}</text>
					<!-- 这是图片 -->
					<image class="hardware-image" :src="item.icon" mode="widthFix"></image>
					<!-- 如果是形态2时，介绍文字放后面 -->
					<text v-if="item.type === 'hardware-item02'" class="hardware-desc">{{ item.desc }}</text>
				</view>
				<!--查看更多-->
				<view class="hardware-item03">
					形态1 - 查看更多
				</view>
			</view>
		</view>
	</scroll-view>
	<!--返回顶部-->
	<image v-show="isShowTop" @click="backTop" class="back-top" src="https://p0.ssl.qhimg.com/t0179ac3294ef926b8c.png"
		mode=""></image>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	//获取窗口信息，获取导航栏高度
	const windowInfo = uni.getWindowInfo()
	//获取小程序胶囊按钮信息，H5没有胶囊按钮，所以需要条件编译
	// #ifdef MP
	const menuRect = uni.getMenuButtonBoundingClientRect()
	// console.log(menuRect)
	// #endif
	// #ifdef H5
	//注意：H5端没有胶囊按钮信息，通过条件编译，设置宽度为0即可，否则浏览器报错
	const menuRect = {
		width: 0
	}
	// #endif
	const entryList = ref([{
			icon: 'https://p0.ssl.qhimg.com/t01f222be1309c2fd7f.png',
			text: '全部产品'
		},
		{
			icon: 'https://p4.ssl.qhimg.com/t01d7427e1f6239b1b1.png',
			text: '360搜索'
		},
		{
			icon: 'https://p2.ssl.qhimg.com/t0199146ed535ecd65e.png',
			text: '360商城'
		},
		{
			icon: 'https://p1.ssl.qhimg.com/t0192c6a682125e6cc9.png',
			text: '360游戏'
		}
	])
	//手机软件
	const sotwareList = ref([{
		icon: 'https://p3.ssl.qhimg.com/t0128439c6143122bad.png',
		name: '手机卫士',
		size: '8.95',
		download: 'https://sjws.ssl.qihucdn.com/mobilesafe/shouji360/360safe/500193/360MobileSafe.apk'
	}, {
		icon: 'https://p2.ssl.qhimg.com/t01fa9c1531e3294ca3.png',
		name: '手机助手',
		size: '27.75',
		download: 'https://app.api.sj.360.cn/channel/getUrl?src=100130&app=zs'
	}, {
		icon: 'https://p1.ssl.qhimg.com/t01d5f0eeb2cc0b0ecd.png',
		name: '浏览器',
		size: '79.20',
		download: 'http://msedown.360safe.com/360mse/360mse_17104513.apk'
	}, {
		icon: 'https://p3.ssl.qhimg.com/t015eebd58e3c9362f7.png',
		name: '清理大师',
		size: '5.8',
		download: 'http://shouji.360.cn/360cleandroid/m/'
	}, {
		icon: 'https://p3.ssl.qhimg.com/t01a555ce62565c3aa9.png',
		name: '极速浏览器',
		size: '54.00',
		download: 'http://msedown.360safe.com/360lite/360mse_ltb00014.apk'
	}, {
		icon: 'https://p1.ssl.qhmsg.com/t01ac094f0e7138f4c1.png',
		name: '省电王',
		size: '2.8',
		download: 'http://msoftdl.360.cn/360batterydoctor/360BatteryDoctor_offical.apk'
	}, {
		icon: 'https://p4.ssl.qhmsg.com/t01e4c126e44c6e0e47.png',
		name: '免费WIFI',
		size: '3.8',
		download: 'http://down.360safe.com/360ap/360freewifi_beta_3.3.5.apk'
	}, {
		icon: 'https://p2.ssl.qhimg.com/t01cbde8755c0c23978.jpg',
		name: '安全客',
		size: '9.98',
		download: 'https://static.anquanke.com/download/anquanke.apk'
	}])
	//页面跳转
	const goToPage = (url) => {
		//通过 API 方式跳转页面，优势：可以处理跳转前的业务逻辑，如判断用户是否已登录，再跳转到不同页面
		// uni.navigateTo({
		// 	url: url
		// })
		// API 方式打开其他微信小程序
		uni.navigateToMiniProgram({
			// 链接可以通过【小程序菜单】->【复制链接】
			shortLink: '#小程序://滴滴出行丨打车骑行火车租车代驾/4kuRTwro0NzKX4n'
		})
	}
	//智能硬件
	const hardwareList = ref([{
			type: 'hardware-item01',
			name: '360智能摄像机',
			desc: '有家有TA 安心相伴',
			icon: 'https://p0.ssl.qhimg.com/t014d0b0d86ea859959.png'
		},
		{
			type: 'hardware-item02',
			name: '360家庭防火墙',
			desc: '极速上网 安全无忧',
			icon: 'https://p3.ssl.qhimg.com/t0128f83364e8c9d4be.png'
		},
		{
			type: 'hardware-item02',
			name: '360儿童手表',
			desc: '为爱守护 乐享生活',
			icon: 'https://p0.ssl.qhimg.com/t010035192a7645472c.png'
		},
		{
			type: 'hardware-item03',
			name: '360行车记录仪',
			desc: '安全驾驶 为您保驾护航',
			icon: 'https://p3.ssl.qhimg.com/t01d3e53e82813eec78.png'
		},
		{
			type: 'hardware-item03',
			name: '360扫地机器人',
			desc: '解放双手 智享生活',
			icon: 'https://p5.ssl.qhimg.com/t012fa14e716336e657.png'
		},
		{
			type: 'hardware-item01',
			name: '360生态链',
			desc: '生态互联 牵手未来',
			icon: 'https://p1.ssl.qhimg.com/t01a44368ac0c2055a4.png'
		},
	])
	//返回顶部
	const scrollTop = ref(0)
	const backTop = () => {
		scrollTop.value = 0
	}
	// 定时器 id，用于实现防抖
	let timerId = -1
	// 是否显示返回顶部按钮
	const isShowTop = ref(false)
	// 滚动时触发 @scroll
	const onScroll = (event) => {
		// 用于实现防抖
		clearTimeout(timerId)
		// 保存滚动条位置
		timerId = setTimeout(() => {
			// 保存滚动条位置的值
			scrollTop.value = event.detail.scrollTop
			// 判断滚动条位置是否超过 200
			if (scrollTop.value >= 200) {
				// 如果超过 200 就显示返回顶部按钮
				isShowTop.value = true
			} else {
				// 没超过就隐藏按钮，通过 v-show 控制图片的隐藏
				isShowTop.value = false
			}
		}, 100)
	}
	//顶部菜单交互效果
	const isShowMenu = ref(false)
</script>
//写样式
<style lang="scss">
	@import "../../uni.scss";

	/* 自定义导航栏 */
	.header {
		/* rpx响应式像素，是小程序用于实现屏幕适配新增的单位 */
		/* 屏幕宽度统一为750rpx，相当于把屏幕分成了750份 */
		/* width:750rpx; */
		/* #ifdef MP */
		height: 80rpx;
		/* #endif */
		/* #ifdef H5 */
		height: 96rpx;
		/* #endif */
		background-color: $uni-color-primary;
		padding-top: 60rpx;
		padding-left: 20rpx;
		display: flex;
		justify-content: space-between;
		/* 主轴对齐  水平 */
		align-items: center;
		position: relative;
		z-index: 1;

		/* 竖直 交叉轴 */
		.header-logo {
			width: 166rpx;
			height: 64rpx;
		}

		.header-menu {
			width: 44rpx;
			height: 32rpx;
		}

		.header-menu-list {
			width: 100%;
			height: 330rpx;
			background-color: rgba(0, 0, 0, 0.5);
			position: absolute;
			left: 0;
			bottom: -330rpx;
			opacity: 0;
			transform: all 0.4s;
			//点击穿透，不能影响后面元素的点击或滑动
			pointer-events: none;
		}

		.is-show-menu {
			opacity: 1;
			//恢复能被点击
			pointer-events: auto;
		}
	}

	/* 轮播图 */
	.swiper-banner,
	.swiper-image {
		width: 100%;
		height: 416rpx;
	}

	/* 产品入口 */
	.entry {
		display: flex;
		height: 120rpx;
		padding-top: 60rpx;
		padding-bottom: 20rpx;

		.entry-item {
			width: 25%;
			display: flex;
			/* 修改主轴方向为竖直 */
			flex-direction: column;
			border-right: 1rpx solid #ddd;
			align-items: center;
		}

		.entry-image {
			width: 92rpx;
			height: 82rpx;
			margin-bottom: 10rpx;
		}

		.entry-text {
			font-size: 24rpx;
		}
	}

	.software {
		padding: 50rpx 30rpx;

		//标题
		.software-title {
			font-size: 48rpx;
			color: #333;
		}

		.software-list {}

		//列表
		.software-item {
			margin-top: 20rpx;
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.software-name {
			margin-top: 10rpx;
			font-size: 30rpx;
			color: #333;
		}

		.software-size {
			font-size: 30rpx;
			color: #cdcdcd;
		}

		.software-download {
			margin-top: 10rpx;
			color: $uni-color-primary;
			background-color: #E2F2E2;
			padding: 4rpx 10rpx;
			font-size: 30rpx;
			width: 100rpx;
			height: 50rpx;
			border-radius: 25rpx;
			text-align: center;
			line-height: 50rpx;
		}

		//图片
		.software-image {
			width: 96rpx;
			height: 96rpx;
		}
	}

	// 通用标题
	.floor-title {
		display: flex;
		font-size: 48rpx;
		color: #333;
		padding: 40rpx 20rpx;
	}

	// 智能硬件
	.hardware {

		// 三种形态
		.hardware-item01,
		.hardware-item02,
		.hardware-item03 {
			// 浮动 -> 环绕效果
			float: left;
			// 盒子模型：边框盒子 => 宽度高度包含 border 和 padding
			box-sizing: border-box;
			width: 50%;
			border-top: 1rpx solid #f60;
			padding: 40rpx;
		}

		.hardware-name {
			display: block;
		}

		.hardware-item01 {
			//400rpx 在 iPhone 15 Pro Max上转形态一的盒子 400rpx 转成了 229px
			//而形态二的盒子 200rpx 转换成 114px，由于形态一的盒子多了1px，最终导致布局错乱
			//BUG定位：rpx底层会自动转换成px，出现小数会四舍五入，导致问题出现
			//解决方案：减少形态一盒子高度为398rpx，最终转换成228px与右侧形态二盒子对齐
			height: 398rpx;
		}

		.hardware-item02 {
			height: 200rpx;
			padding-right: 0;
			padding-bottom: 0;


			.hardware-name {
				display: block;
			}

			.hardware-image {
				float: right;
				width: 168rpx;
				height: 112rpx;
			}
		}

		.hardware-item03 {
			height: 350rpx;
		}

		.hardware-list {

			// :nth-child() 伪类选择器，选中第 1，4，6 个子元素，添加右边框
			view:nth-child(1),
			view:nth-child(4),
			view:nth-child(6) {
				border-right: 1rpx solid #f60;
			}
		}

		.hardware-name {
			font-size: 15px;
			color: #333;
		}

		.hardware-desc {
			font-size: 26rpx;
			color: #999;
			margin-top: 20rpx;
		}

		.hardware-image {
			width: 270rpx;
			height: 178rpx;
		}
	}

	//<scroll-view scroll-y>
	.scroll-body {
		//相对于视口的长度单位 vh 和 vw
		//Ivh 意味着值为视口高度的 1%，同理 1vw 即值为视口宽度的 1%
		//calc() :此CSS函数允许在声明CSS属性值时进行一些运算
		//利用 calc() 减去自定义导航栏的高
		height: calc(100vh - 100rpx);
	}

	.back-top {
		width: 80rpx;
		height: 80rpx;
		background-color: $uni-color-primary;
		//position: relative; //相对于自身定位
		//position: absolute; //相对于定位的父元素
		position: fixed; //相对于视口定位
		right: 40rpx;
		bottom: 80rpx;
		border-radius: 50%;
		// 添加 padding 让图片变小，同时设置为边框盒子模型，添加 padding 后盒子不会增大
		padding: 10rpx;
		box-sizing: border-box;
	}
</style>